<template>
    <page-header-wrapper :title="false">
      <a-card :loading="pageLoading">
        <div slot="title"><a-icon type="user" /> 客户详情</div>
        <div slot="extra">
          <a-button size="small" @click="$router.go(-1)"><a-icon type="arrow-left" />返回</a-button>
          <a-button size="small" type="danger" :style="{ marginLeft: '5px' }" @click="transfer">查看转移记录</a-button>
        </div>
        <a-row :gutter="[20,20]">
          <a-col :span="10">
            <a-card title="客户基本资料">
              <template slot="extra">
                <a-button size="small" type="primary" icon="edit" @click="submitBaseInfo">保存信息</a-button>
              </template>
              <a-spin :spinning="baseLoading">
                <a-row
                  :style="{ borderLeft:'solid 3px #40a9ff', backgroundColor: 'rgba(64,169,255,0.3)', padding: '15px 10px', marginBottom: '20px' }">
                  <a-col :span="24">
                    <div>客户来源：{{baseInfoForm.source}}</div>
                    <div>入库时间：{{baseInfoForm.created_at}} / 领取时间：{{baseInfoForm.received_at}}</div>
                  </a-col>
                </a-row>
                <a-form-model
                  ref="form"
                  :model="baseInfoForm"
                  :label-col="labelCol"
                  :wrapper-col="wrapperCol"
                >
                  <a-row :gutter="10">
                    <a-col :span="12">
                      <a-form-model-item label="客户姓名">
                        <a-input v-model="baseInfoForm.customer_name" />
                      </a-form-model-item>
                    </a-col>
                    <a-col :span="12">
                      <a-form-model-item label="联系电话1">
                        <a-input readOnly v-model="baseInfoForm.phone" />
                      </a-form-model-item>
                    </a-col>
                    <a-col :span="12">
                      <a-form-model-item label="商标名称">
                        <a-input readOnly v-model="baseInfoForm.tm_name" />
                      </a-form-model-item>
                    </a-col>
                    <a-col :span="12">
                      <a-form-model-item label="专利名称">
                        <a-input readOnly v-model="baseInfoForm.pt_name" />
                      </a-form-model-item>
                    </a-col>
                    <a-col :span="12">
                      <a-form-model-item label="联系电话2">
                        <a-input v-model="baseInfoForm.phone2" />
                      </a-form-model-item>
                    </a-col>
                    <a-col :span="12">
                      <a-form-model-item label="申请主体">
                        <a-input v-model="baseInfoForm.subject_of_application" />
                      </a-form-model-item>
                    </a-col>
                    <a-col :span="12">
                      <a-form-model-item label="所属行业">
                        <a-input placeholder="输入所属行业" v-model="baseInfoForm.industry" />
                      </a-form-model-item>
                    </a-col>
                    <a-col :span="12">
                      <a-form-model-item label="客户微信">
                        <a-input placeholder="输入客户微信号" v-model="baseInfoForm.wechat" />
                      </a-form-model-item>
                    </a-col>
                    <!--          <a-col :span="12">-->
                    <!--            <a-form-model-item label="客户邮箱">-->
                    <!--              <a-input placeholder="输入客户邮箱" v-model="baseInfoForm.email" />-->
                    <!--            </a-form-model-item>-->
                    <!--          </a-col>-->
                    <a-col :span="24">
                      <a-form-model-item label="客户状态" :label-col="{ span: 3 }" :wrapper-col="{ span: 21 }" prop="customer_status">
                        <a-select v-model="baseInfoForm.customer_status">
                          <a-select-option v-for="(item,index) in statusOpt" :key="index" :value="index">{{item}}</a-select-option>
                        </a-select>
                      </a-form-model-item>
                    </a-col>
                    <a-col :span="24">
                      <a-textarea rows="3" placeholder="输入备注信息" v-model="baseInfoForm.notes"></a-textarea>
                    </a-col>
                  </a-row>
                </a-form-model>
              </a-spin>
            </a-card>
          </a-col>
          <a-col :span="14">
            <a-card :style="{ height: '595px' }">
              <a-tabs default-active-key="1">
                <a-tab-pane key="1" tab="所有合同">
                  <s-table
                    bordered
                    ref="table"
                    size="middle"
                    :row-key="(record) => record.contract_id"
                    :columns="contractColumns"
                    :data="contractData"
                    :scroll="{ y: 380 }"
                  >
                    <template slot="action" slot-scope="text, record">
                      <a-button type="link" @click="$router.push({ name: 'ContractDetail', params: { id: record.contract_id } })">查看</a-button>
                    </template>
                  </s-table>
                </a-tab-pane>
                <a-tab-pane key="2" tab="客户跟踪">
                  <a-row>
                    <a-col :span="3">
                      <a-tabs :default-active-key="'1'" tab-position="left" @change="onTabs">
                        <a-tab-pane key="1" tab="考拉通信">
                        </a-tab-pane>
                        <a-tab-pane key="2" tab="南方电信">
                        </a-tab-pane>
                      </a-tabs>
                    </a-col>
                    <a-col :offset="1" :span="20">
                      <s-table
                        bordered
                        ref="table"
                        size="middle"
                        :row-key="(record) => record.id"
                        :columns="trackColumns"
                        :data="trackData"
                      >
                        <div slot="url" slot-scope="text">
                          <audio :src="text" controls :style="{ height: '20px', lineHeight: '20px' }">
                            您的浏览器不支持 audio 标签
                          </audio>
                        </div>
                      </s-table>
                    </a-col>
                  </a-row>
                </a-tab-pane>
              </a-tabs>
            </a-card>
          </a-col>
          <a-col :span="24">
            <a-card>
              <s-table
                bordered
                ref="table"
                size="middle"
                :row-key="(record) => record.cb_id"
                :columns="businessColumns"
                :data="businessData"
              >
                <template slot="business_name" slot-scope="text,record">
                  <div>{{text}}</div>
                  <div>{{record.open_time}}</div>
                </template>
                <template slot="price" slot-scope="text,record">
                  <div><a-tag color="red">打款金额：{{text}}</a-tag></div>
                  <div><a-tag color="red">官费：{{record.official_fee}}</a-tag></div>
                  <div><a-tag color="red">代理费：{{record.agency_fee}}</a-tag></div>
                </template>
                <template slot="status2_name" slot-scope="text">
                  <a-tag color="red">{{text}}</a-tag>
                </template>
                <template slot="action" slot-scope="text, record">
                  <a-button type="link" @click="$router.push({ name: 'BusinessDetail', params: { id: record.cb_id } })">查看</a-button>
                </template>
              </s-table>
            </a-card>
          </a-col>
        </a-row>
      </a-card>
      <a-modal
        title="转移记录"
        v-model="visible"
      >
        <s-table
          ref="table"
          size="small"
          :row-key="(record) => record.id"
          :columns="transferColumns"
          :data="transferData"
        >
        </s-table>
      </a-modal>
    </page-header-wrapper>
</template>

<script>
  import { STable } from '@/components'
  import {
    getCustomerTransfer,
    getCustomerDetail,
    postCustomerDetail,
    getCustomerContract,
    getCustomerBusiness,
    trackList
  } from '@/api/customer'
  import col from '@/columns/customer'

  export default {
    inject: ['reload'],
    components: {
      STable
    },
    name: 'CustomerDetail',
    data () {
      return {
        transferColumns: col.transfer,
        transferData: parameters => {
          return getCustomerTransfer(Object.assign(parameters, this.queryParam)).then(res => {
            return res.result
          })
        },
        queryParam: {},
        visible: false,
        loading: true,
        rightLoading: true,
        customerId: '',
        baseLoading: true,
        labelCol: { span: 7 },
        wrapperCol: { span: 17 },
        baseInfoForm: {},
        statusOpt: {},
        rules: {
          customer_name: [
            { require: true, message: '必须填写用户姓名', trigger: 'blur' }
          ],
          customer_status: [
            { require: true, message: '必须选择客户状态', trigger: 'change' }
          ]
        },
        contractColumns: col.contract,
        contractLoading: true,
        contractData: parameters => {
          return getCustomerContract(Object.assign(parameters, this.queryParam)).then(res => {
            return res.result
          })
        },
        trackColumns: col.track,
        trackData: parameters => {
          return trackList(Object.assign(parameters, this.queryParam)).then(res => {
            return res.result
          })
        },
        businessColumns: col.business,
        businessData: parameters => {
          return getCustomerBusiness(Object.assign(parameters, this.queryParam)).then(res => {
            return res.result
          })
        },
        pageLoading: true
      }
    },
    activated () {
      this.init()
    },
    created () {
      this.customerId = this.$route.params.id
      this.queryParam['filter[customer_id]'] = this.customerId
    },
    methods: {
      transfer () {
        this.visible = true
      },
      init () {
        this.pageLoading = true
        this.customerId = this.$route.params.id
        this.queryParam['filter[customer_id]'] = this.customerId
        this.getDetail(this.$route.params.id)
        this.pageLoading = false
        this.$refs.table.refresh(true)
      },
      getDetail (id) {
        const app = this
        app.baseLoading = true
        getCustomerDetail(id).then(res => {
          if (res.status === 0) {
            app.baseInfoForm = res.result.customer
            app.statusOpt = res.result.customer_status_opts
            app.baseLoading = false
          } else {
            app.$warning({
              title: res.msg,
              onOk: () => {
                app.$router.go(-1)
              }
            })
          }
        })
      },
      submitBaseInfo () {
        const app = this
        app.$refs.form.validate(valid => {
          if (valid) {
            const data = {}
            const form = app.baseInfoForm
            for (const k in form) {
              data['customer[' + k + ']'] = form[k]
            }
            postCustomerDetail(app.keys, data).then(res => {
              if (res.status === 0) {
                app.getDetail(app.keys)
              } else {
                app.$warning({
                  title: res.msg
                })
              }
            })
          } else {
            return false
          }
        })
      },
      onTabs (key) {
        this.queryParam['filter[type]'] = key
        this.$refs.table.refresh(true)
      }
    }
  }
</script>

<style scoped>

</style>
